const configs = require("./src/config/config");
const WebpackBar = require("webpackbar");
const webpack = require("webpack");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const ThemeColorReplacer = require("webpack-theme-color-replacer");
const forElementUI = require("webpack-theme-color-replacer/forElementUI");
const productionGzipExtensions = ["js", "css"];
module.exports = {
  /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */
  publicPath:
    process.env.NODE_ENV === "production"
      ? `/${configs.setting.buildPath}`
      : "/",
  /* 输出文件目录：在npm run build时，生成文件的目录名称 */
  outputDir: process.env.VUE_APP_FLAG || configs.setting.buildPath || "dist",
  /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
  assetsDir: "assets",
  /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
  productionSourceMap: false,
  /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
  filenameHashing: false,
  /* 代码保存时进行eslint检测 */
  lintOnSave: true,
  /* GZIP压缩配置*/
  // eslint-disable-next-line no-unused-vars
  configureWebpack: {
    plugins: [
      new WebpackBar({
        name: configs.setting.title,
        color: configs.theme.primary
      }),
      new ThemeColorReplacer({
        fileName: "../style/theme-colors.[contenthash:8].css",
        matchColors: [
          ...forElementUI.getElementUISeries("#409EFF"),
          ...forElementUI.getElementUISeries("#67C23A"),
          ...forElementUI.getElementUISeries("#E6A23C"),
          ...forElementUI.getElementUISeries("#F56C6C"),
          ...forElementUI.getElementUISeries("#909399"),
          ...forElementUI.getElementUISeries("#FFFFFF"),
          ...forElementUI.getElementUISeries("#000000")
        ],
        changeSelector: forElementUI.changeSelector,
        injectCss: true,
        // isJsUgly: process.env.NODE_ENV === "production" ? true : undefined
        isJsUgly: undefined
      }),
      new CompressionWebpackPlugin({
        filename: "[path].gz", //[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串
        algorithm: "gzip", //压缩成gzip
        //所有匹配该正则的资源都会被处理。默认值是全部资源。
        test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
        threshold: 10240, //只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
        minRatio: 0.8 //只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
      })
    ],
    resolve: {
      alias: {
        components: "@/components",
        views: "@/views",
        assets: "@/assets",
        api: "@/api",
        utils: "@/utils"
      }
    }
  },
  /* webpack-dev-server 相关配置 */
  devServer: {
    /* 自动打开浏览器 */
    open: true,
    /* 设置为0.0.0.0则所有的地址均能访问 */
    host: "0.0.0.0",
    port: 6500,
    https: false,
    hotOnly: false,
    /* 使用代理 */
    proxy: "http://api.dev.mistiny.com:8080/"
    // proxy: {
    //   "/admin": {
    //     /* 目标代理服务器地址 */
    //     target: "http://192.168.0.112",
    //     ws: true,
    //     /* 允许跨域 */
    //     changeOrigin: true,
    //     pathRewrite: {
    //       "^/admin": "/" //请求的时候使用这个api就可以
    //     }
    //   }
    // }
  },
  css: {
    requireModuleExtension: true,
    sourceMap: true,
    loaderOptions: {
      sass: {
        sassOptions: { outputStyle: "expanded" },
        additionalData: `@import "@/assets/themes.scss";`
      }
    }
  }
};
